<template>
  <div>
    <a-modal
      :title="title"
      :width="1200"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :footer="null"
      @ok="handleSubmit"
      @cancel="handleCancel">
      
      <a-card :bordered="false">
        <s-table
          ref="table"
          size="default"
          :columns="columns"
          :data="getData"
          :alert="true"
          :showPagination="true"
          :rowKey="(record) => record.code"
          :rowSelection="null"
        >

        <span slot="actionOutOrder" slot-scope="text, record">
        <!--    出库单明细 单独的按钮      -->
          <a
            @click="backStoreOrderDetailModal.show(record)">订单明细</a>
        </span>
        
        </s-table>
      
      </a-card>
    </a-modal>
    <back-store-order-detail-modal ref="backStoreOrderDetailModal"/>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";

import {STable} from '@/components'
import BackStoreOrderDetailModal from './backStoreOrderDetailModal.vue'
import {page} from "@/api/modular/main/emsorder/emsOrderManage.js";

@Component({
  components: {
    STable,
    BackStoreOrderDetailModal
  }
})

export default class BackStoreRecordDetailModal extends Vue {
  @Ref() readonly table!: any
  @Ref() readonly backStoreOrderDetailModal!: BackStoreOrderDetailModal
  
  visible = false
  title = ''
  confirmLoading = false
  queryParam = {
    materialType: '',
    sourceOrderId: '',
    pageSize: undefined,
    
  }
  
  emsOrder = {}
  
  extra = null
  columns = [
    {
      title: '序号', width: '80px',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      title: '单号',
      dataIndex: 'orderNumber'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'actionOutOrder'}
    }
  ]


// 加载数据方法 必须为 Promise 对象
  getData(parameter: { pageNo: number, pageSize: number }) {
    const params = {
      ...parameter,
      ...this.queryParam,
      planType: 1
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    this.queryParam.sourceOrderId = record.orderId
    this.queryParam.pageSize = -1
    this.title = `退库入库单明细（${record. orderNumber}）`
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  handleSubmit() {
    this.visible = false
  }
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
